<template>
  <div class="finish_exam_item" v-if="show">
    <el-text style="font-size: 1.2em;font-weight: bold">{{ user.name }}</el-text>
    <div class="finish_exam_item_right">
      <el-text type="primary" class="finish_txt" v-if="finishedReferee">{{ userCommit?"已完成批阅":"考生未提交，已默认为0分" }}</el-text>
      <el-button @click="clickRefereeBtn" :disabled="finishedReferee" style="width: 39%" type="primary">前往批阅</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, PropType, reactive, Ref, ref} from "vue";
import {UserRequest} from "../request/MyRequset";
import {Grade, User} from "../types/mytypes";
const emit = defineEmits(['clickBtn']);
const props = defineProps({
  grade: Object as PropType<Grade>,
  userCommit:Boolean
})
let user: User = reactive({} as User);
let show = ref(false);
let finishedReferee:Ref<boolean> = ref(false)
onMounted(async () => {
  user = (await UserRequest.getById(props.grade?.u_id as number)).data;
  finishedReferee.value = !(props.grade?.teacherShow == 0)

  show.value = true
})
const clickRefereeBtn = ()=>{
  emit("clickBtn")
}
</script>

<style lang="scss" scoped>
.finish_exam_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 2em;

  .finish_exam_item_right {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 50%;
    justify-content: end;

    .finish_txt {
      width: 61%;
      padding: 0;
      margin: 0 1em 0 0 ;
      display: flex;
      flex-direction: row;
      justify-content: end;
      font-size: 0.9em;
    }
  }
}
</style>